<template>
  <div>
    <div class="table-cover">
      <el-table
        :data="tableData2"
        style="width: 100%"
        :row-class-name="tableRowClassName"

      >
        <el-table-column
          prop="status"
          label="Status"
          width="90"
        >
        </el-table-column>
        <el-table-column
          prop="branch"
          label="Branch"
          width="70"
        >
        </el-table-column>
        <el-table-column
          prop="sender"
          label="Sender">
        </el-table-column>
        <el-table-column
          prop="time"
          label="Time">
        </el-table-column>
        <el-table-column
          prop="price"
          label="Price">
        </el-table-column>
        <el-table-column
          prop="user"
          label="User">
        </el-table-column>
        <el-table-column
          prop="material"
          label="Material">
        </el-table-column>
        <el-table-column
          prop="burdening"
          label="Burdening">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="Operation"
          width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">view</el-button>
            <el-button type="text" size="small">edit</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="10"
        :total="total"
        @current-change="changepage"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
    export default {
      name: "GDFunctionBranchOrder",
      data(){
        return{
          page:1
        }
      },
      mounted(){
        this.$store.commit('setTableData', this.api.getOrderList(this.$store.state.branch));
      },
      methods:{
        handleClick(e) {

        },
        changepage(page) {
          this.$store.commit('setTableData', this.api.getOrderList(this.$store.state.branch, page - 1));
        },
        tableRowClassName({row, rowIndex}) {
          if (row.status === 'warning') {
            return 'warning-row';
          } else if (row.status === 'success') {
            return 'success-row';
          } else if (row.status === 'sending') {
            return 'sending-row'
          } else if (row.status === 'cancelled') {
            return 'cancelled-row'
          }
          return '';
        }
      },
      computed:{
        tableData2() {
          return this.$store.state.tableData;
        },
        total(){
          return this.api.getOrderTotalByBranch(this.$store.state.branch);
        },
        id(){
          return this.$store.state.branch;
        }
      }
    }
</script>

<style scoped>
  .block {
    position: absolute;
    /*bottom:10px;*/
    left: 50%;
    margin-top: 20px;
    transform: translateX(-50%);
  }

  .table-cover {
    margin-bottom: 20px;
    background: #fff;
    border-radius: 4px;
  }
</style>
